<route lang="json5" type="page">
  {
  layout: 'default',
  style: {
  navigationBarTitleText: '购物车',
  },
  anonymous: false
  }
</route>

<script lang="ts" setup>
import ClassCard from '@/components/ClassCard.vue'
import { ShopApi } from '@/apis'
import { useUserStore } from '@/stores'

const userStore = useUserStore()

const goods = ref([])

const getCartItemList = async () => {
  const list = await ShopApi.getCartItemList(userStore.currentStudent.id)
  goods.value = list.map((item) => {
    return {
      select: true,
      ...item,
    }
  })
}

const totalPrice = computed(() => {
  const arr = goods.value.filter(item => item.select)
  if (!arr.length) {
    return 0
  }
  let count = 0
  for (const i in arr) {
    console.log(arr[i])
    count += arr[i].classInfo.unitPrice * arr[i].lessonIndexes.length
  }
  return count.toFixed(2)
})

const selectCount = computed(() => goods.value.filter(item => item.select).length)
const isSelectAll = ref(false)

const deleteHandle = (item, index) => {
  console.log(item)
  uni.showModal({
    title: '提示',
    content: '是否要删除该记录？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await ShopApi.removeCartItem(item.id)
          goods.value.splice(index, 1)
          uni.showToast({
            title: '删除成功',
            icon: 'none',
          })
        } catch {}
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    },
  })
}

const toOrder = () => {
  uni.setStorageSync('orderItemList', JSON.stringify(goods.value.filter(item => item.select)))
  uni.navigateTo({
    url: '/pages/order/create',
  })
}

watch(isSelectAll, (val) => {
  if (val) {
    goods.value.forEach((item) => {
      item.select = val
    })
  } else {
    if (goods.value.every(i => i.select)) {
      goods.value.forEach((item) => {
        item.select = val
      })
    }
  }
})
watch(goods, (val) => {
  if (val.every(item => item.select)) {
    isSelectAll.value = true
  } else {
    isSelectAll.value = false
  }
}, {
  deep: true,
})

const { loading, data } = useRequest(getCartItemList)
onShow(() => {
  const isRefresh = uni.getStorageSync('refreshCart')
  if (isRefresh === 1) {
    getCartItemList()
    uni.removeStorageSync('refreshCart')
  }
})
</script>

<template>
  <view v-if="loading" class="flex-row-center-center bg-white page">
    <wd-loading color="#33AD7C" />
  </view>
  <template v-else>
    <view class="content px py">
      <uni-swipe-action>
        <uni-swipe-action-item v-for="(item, index) in goods" :key="item.cardItemId">
          <template #right>
            <view class="flex-col-center-center pl-[30rpx]">
              <view class="h-[88rpx] w-[88rpx] flex-col-center-center border-rd-[50%] bg-[#FFD7D7]" @click="deleteHandle(item, index)">
                <wd-icon name="delete" size="22px" color="#DD0A0A" />
              </view>
            </view>
          </template>
          <view class="mt-[24rpx] flex items-center border-rd-[16rpx] bg-white" :style="index === 0 ? 'margin-top:0' : ''">
            <view class="pl-[24rpx]" @click="item.select = !item.select">
              <wd-icon v-if="!item.select" name="circle1" size="20px" color="#999" />
              <wd-icon v-else name="check-circle-filled" size="20px" color="#5aab80" />
            </view>
            <ClassCard :info="item.classInfo" :show-renewal-time="true" />
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
      <view v-if="!goods.length">
        <wd-status-tip image="content" tip="暂无数据" />
      </view>
    </view>
    <view v-if="goods.length" class="footer">
      <view class="flex items-center justify-between gap-[20rpx] px-[30rpx] py-[12rpx]">
        <view class="flex flex-1 justify-between">
          <view class="flex items-center" @click="isSelectAll = !isSelectAll">
            <view class="mr-[10rpx] pt-[5rpx]">
              <wd-icon v-if="!isSelectAll" name="circle1" size="20px" color="#999" />
              <wd-icon v-else name="check-circle-filled" size="20px" color="#5aab80" />
            </view>
            <text class="font-size-[28rpx] line-1">
              全选
            </text>
          </view>
          <view>
            <PriceText :price="`${totalPrice}`" />
            <view class="font-size-[24rpx] color-[#666]">
              共{{ selectCount }}门课程
            </view>
          </view>
        </view>
        <view class="flex gap-[24rpx]">
          <wd-button type="success" :disabled="!selectCount" :round="false" @click="toOrder">
            创建订单
          </wd-button>
        </view>
      </view>
    </view>
  </template>
</template>

<style lang="scss" scoped>
  .content {
    height: calc(100vh - 160rpx) !important;
    overflow: scroll;
  }

  .footer {
    position: fixed;
    left: 0px;
    bottom: 0px;

    height: 160rpx;
    width: 100%;
    background: white;
    box-shadow: 0px -4px 4px 0px #0000000D;
  }

  // :deep(.class-card) {
  //   &:not(:first-of-type) {
  //     margin-top: 24rpx;
  //   }
  // }
</style>
